<template>
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="edit"><a-icon type="form" />编辑</a-button>
          <a-button type="primary" @click="backList"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="基本信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>服务商id：</p>
            <p>{{detailData.id}}</p>
          </a-col>
          <a-col :span="8">
            <p>服务商账号：</p>
            <p>{{detailData.partner_no}}</p>
          </a-col>
          <a-col :span="8">
            <p>服务商姓名：</p>
            <p>{{detailData.partner_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>服务商手机号：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
          <a-col :span="8">
            <p>*身份证号：</p>
            <p>{{detailData.identity}}</p>
          </a-col>
          <a-col :span="8">
            <p>省份：</p>
            <p>{{detailData.province_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>城市：</p>
            <p>{{detailData.city_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>区/县：</p>
            <p>{{detailData.district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>签约状态：</p>
            <p>{{detailData.is_verify ? '已签约' : '未签约'}}</p>
            <!-- detailData.is_verify -->
          </a-col>
          <a-col :span="8">
            <p>分润状态：</p>
            <p>{{detailData.is_commission ? '开启' : '关闭'}}</p>
          </a-col>
          <a-col :span="8">
            <p>账号状态：</p>
            <p>{{detailData.is_enable ? '开启' : '关闭'}}</p>
          </a-col>
          <a-col :span="8">
            <p>类型：</p>
            <!-- 务商类型 1个人2企业 -->
            <p>{{this.typeTxt}}</p>
          </a-col>
          <a-col :span="8">
            <p>创建时间：</p>
            <p>{{detailData.created_at}}</p>
          </a-col>
          <a-col :span="8">
            <p>更新时间：</p>
            <p>{{detailData.updated_at}}</p>
          </a-col> 
          <a-col :span="8">
            <p>签约时间：</p>
            <p>{{detailData.sign_at}}</p>
          </a-col> 
          <a-col :span="8">
            <p>签约年限：</p>
            <p>{{detailData.sign_year_limit}}</p>
          </a-col>  
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="推荐人信息" key="2">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>服务商id：</p>
            <p>{{detailData.pid}}</p>
          </a-col>
          <a-col :span="8">
            <p>推荐人姓名：</p>
            <p>{{detailData.pid_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>推荐人手机号：</p>
            <p>{{detailData.pid_phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="邀请码信息" key="3">
        <a-row :gutter="16">
          <a-col :span="6">
            <ul class="pic-show double-pic">
              <li>
                <img :src="getQrcode(inviteMember)">
                <p>会员邀请码</p>
              </li>
            </ul>
          </a-col>
          <a-col :span="6">
            <ul class="pic-show double-pic">
              <li>
                <img :src="getQrcode(invitePartner)">
                <p>服务商邀请码</p>
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="证件信息" key="4" v-if="isLicense">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>营业执照名称：</p>
            <p>{{detailData.license_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>营业执照：</p>
            <p><img class="license-pic" :src="detailData.license" alt=""></p>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <div class="modal-wrap">
      <a-modal
        class="common-pop"
        title="主体信息编辑"
        v-model="visible"
        :maskClosable="false"
        :destroyOnClose="true"
        :closable="false"
        :footer="null"
      >
        <div>
          <subject-edit
            :detailData="detailData"
            @closePop="handleClosePop"
            @savePop="handleSavePop"
          />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { partnerBody } from '../../../store/providerApi'
import jrQrcode from 'jr-qrcode'
// 主体消息
export default {
  name: 'subject',
  components: {
    subjectEdit:()=> import('./subjectEdit.vue')
  },
  computed: {
    // type () {
    //   if (this.detailData.type === 1) {
    //     return '个人'
    //   } else if (this.detailData.type === 2) {
    //     return '企业'
    //   }
    // }
  },
  data() {
    return {
      activeKey: ['1', '2', '3', '4'],
      detailData: {},
      inviteMember: '',
      invitePartner: '',
      visible: false,
      typeTxt: '',
      isLicense: false
    }
  },
  mounted() {
    this.detailInit()
  },
  methods: {
    detailInit () {
      partnerBody({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
        this.inviteMember = res.data.invite_member_url
        this.invitePartner = res.data.invite_partner_url
        if (res.data.type === 1) {
          this.typeTxt = '个人'
          this.isLicense = false
        } else if (res.data.type === 2) {
          this.typeTxt = '企业'
          this.isLicense = true
        }
      })
    },
    edit () {
      this.visible = true
    },
    handleClosePop () {
      this.visible = false
    },
    handleSavePop () {
      this.visible = false
      this.detailInit()
    },
    getQrcode (img) {
      return jrQrcode.getQrBase64(img)
    },
    backList() {
      this.$router.push('/menu/provider/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.detailMain{
  .top-btns{
    margin-top: 20px;
  }
  .license-pic{
    // width: 60%;
    max-height: 470px;
  }
}
</style>